<template>
    <div>
        <div class="stuInfo_tittle">
            单个学生信息查询
        </div>
        <el-row>
            <el-col :span="6" :offset="6">
                <el-input v-model="stu_id" placeholder="请输入学号"></el-input>
            </el-col>
            <el-col :span="4" :offset="1">
                <el-button @click="getStudentInfo">点击查询</el-button>
            </el-col>
        </el-row>
        <div v-if="show" class="table_wrap">
            <img :src="studentInfo[0].stu_head_img" alt="" width="200px" height="200px">
            <el-table :data="studentInfo" style="width: 100%" height="110">
                <el-table-column prop="stu_id" label="学号">
                </el-table-column>
                <el-table-column prop="stu_name" label="姓名">
                </el-table-column>
                <el-table-column prop="stu_sex" label="性别">
                </el-table-column>
                <el-table-column prop="stu_jg" label="籍贯">
                </el-table-column>
                <el-table-column prop="stu_date" label="出生日期">
                </el-table-column>
                <el-table-column prop="stu_hobby" label="爱好">
                </el-table-column>
                <el-table-column prop="stu_gbf" label="男或女朋友">
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
import { req_stu_info_personal } from '@/api/stuInfo.js';
export default {
    data() {
        return {
            stu_id: '',
            studentInfo: [],
            show: false
        }
    },
    methods: {
        async getStudentInfo() {
            let result = await req_stu_info_personal(this.stu_id);
            if (result.data.length > 0) {
                result.data[0].stu_date = result.data[0].stu_date.slice(0, 10)
                this.studentInfo = result.data
                this.show = true;
            }else{
                this.$message({
                    type:'error',
                    message:'您输入的学号有误，请重新输入！'
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
div {
    .stuInfo_tittle {
        height: 30px;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        margin: 30px 0;
    }


    .el-row {
        height: 50px;
    }

    .table_wrap {
        text-align: center;
        height: 150px;
    }
}
</style>